<template>
  <div class="app-container">
    <vxe-toolbar ref="xToolbar" custom>
      <template #buttons>
        名称：
        <el-input v-model="condition.name" placeholder="名称" style="width: 200px;margin-right: 10px" class="filter-item" />
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="pageAdminRole()">搜索</el-button>
        <el-button v-if="checkPermission(['sys:admin-role:add'])" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-plus" @click="edit(0)">新增</el-button>
        <el-button v-if="checkPermission(['sys:admin-role:delete'])" type="danger" icon="el-icon-close" @click="batchDelAdminRole()">删除</el-button>
      </template>
    </vxe-toolbar>
    <!--table-->
    <vxe-table
      ref="xTable"
      border
      stripe
      highlight-hover-row
      show-overflow
      resizable
      row-id="id"
      size="normal"
      :data="tableData"
    >
      <vxe-table-column type="checkbox" width="60" />
      <vxe-table-column type="seq" title="序号" width="60" />
      <vxe-table-column field="id" title="ID" />
      <vxe-table-column field="role" title="角色名" />
      <vxe-table-column field="updateTime" title="更新时间" />
      <vxe-table-column title="操作" fixed="right" width="200">
        <template #default="{row}">
          <el-button v-if="checkPermission(['sys:admin-role:update'])" type="success" size="small" icon="el-icon-edit" @click="edit(1, row)">修改</el-button>
          <el-button v-if="checkPermission(['sys:admin-role:delete'])" type="danger" size="small" icon="el-icon-close" @click="delAdminRole(row.id)">删除</el-button>
        </template>
      </vxe-table-column>
    </vxe-table>

    <vxe-pager
      background
      size="small"
      :current-page="condition.pageNum"
      :page-size="condition.pageSize"
      :total="condition.totalSize"
      :page-sizes="[10, 20, 100, {label: '大量数据', value: 1000}, {label: '全量数据', value: -1}]"
      :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
      @page-change="handlePage"
    />
    <!--edit-->
    <el-dialog :visible.sync="dialogVisible" title="编辑">
      <el-form :model="form" label-width="80px" label-position="left">
        <el-form-item label="Name">
          <el-input v-model="form.role" placeholder="Role Name" />
        </el-form-item>
        <!--        <el-form-item label="Desc">-->
        <!--          <el-input-->
        <!--            v-model="form.description"-->
        <!--            :autosize="{ minRows: 2, maxRows: 4}"-->
        <!--            type="textarea"-->
        <!--            placeholder="Role Description"-->
        <!--          />-->
        <!--        </el-form-item>-->
        <el-form-item label="Menus">
          <el-tree
            ref="tree"
            :data="treeData"
            show-checkbox
            node-key="id"
            :default-checked-keys="treeCheckedKeys"
            :props="treeProps"
            class="permission-tree"
          />
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button v-if="checkPermission(['sys:admin-role:add','sys:admin-role:update'])" type="primary" @click="edit(2)">保存</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import checkPermission from '@/utils/permission' // 权限判断函数
import {
  addAdminRole,
  delAdminRole,
  updateAdminRole,
  getAdminRole,
  pageAdminRole
} from '@/api/sys/admin/role'
import { treeAdminPermission } from '@/api/sys/admin/permission'

export default {
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      condition: {
        pageSize: 10,
        pageNum: 1,
        totalSize: 0,
        name: ''
      },
      form: {
        id: -1,
        name: '',
        permission: '',
        description: ''
      },
      treeData: [],
      treeCheckedKeys: [],
      treeProps: {
        children: 'children',
        label: 'title'
      }
    }
  },
  created() {
    // 初始化分页
    this.pageAdminRole()
    // 将表格和工具栏进行关联
    this.$nextTick(() => {
      const $table = this.$refs.xTable
      $table.connect(this.$refs.xToolbar)
    })
  },
  methods: {
    addAdminRole(data) {
      addAdminRole(data).then(response => {
        this.$message({ type: 'success', message: response.msg })
        this.pageAdminRole()
      })
    },
    delAdminRole(id) {
      this.$confirm('是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delAdminRole(id).then(response => {
          this.$message({ type: 'success', message: response.msg })
          this.pageAdminRole()
        })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' })
      })
    },
    updateAdminRole(data) {
      updateAdminRole(data).then(response => {
        this.$message({ type: 'success', message: response.msg })
        this.pageAdminRole()
      })
    },
    getAdminRole(id) {
      getAdminRole(id).then(response => {
        this.form = response.data.item
      })
    },
    pageAdminRole() {
      pageAdminRole(this.condition).then(response => {
        this.tableData = response.data.list
        this.condition.totalSize = response.data.total
      })
    },
    handlePage({ currentPage, pageSize }) {
      this.condition.pageNum = currentPage
      this.condition.pageSize = pageSize
    },
    edit(type, row) {
      // 0 增加 1 修改  2 保存增加/修改
      if (type === 0) {
        this.form = { id: -1 }
        this.treeCheckedKeys = []
        this.dialogVisible = true
        this.treeAdminPermission()
      } else if (type === 1) {
        getAdminRole(row.id).then(response => {
          this.treeCheckedKeys = response.data.permissionIds
          this.form = row
          this.dialogVisible = true
          this.treeAdminPermission()
        })
      } else if (type === 2) {
        this.form.permissionIds = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())
        this.form.state = 0
        if (this.form.id > 0) {
          this.updateAdminRole(this.form)
        } else {
          this.addAdminRole(this.form)
        }
        this.dialogVisible = false
        this.pageAdminRole()
      }
    },
    batchDelAdminRole() {
      this.$confirm('是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const selectRecords = this.$refs.xTable.getCheckboxRecords()
        for (let i = 0; i < selectRecords.length; i++) {
          delAdminRole(selectRecords[i].id).then(response => {
          })
        }
        this.$message({ type: 'success', message: 'ok' })
        this.pageAdminRole()
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' })
      })
    },
    treeAdminPermission() {
      treeAdminPermission().then(response => {
        this.treeData = response.data
      })
    },
    checkPermission // 验证权限
  }
}
</script>

<style scoped>

</style>
